<template>
  <div>
    <h1>生命周期示例</h1>
    <p>{{ count }}</p>
    <p>
      <button @click.prevent="onClickHandler" >+1</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    onClickHandler() {
      this.count++;
    }
  },
  /**
   * 在实例初始化之后，
   * 数据观测 (data observer) 
   * 和 event/watcher 事件配置之前被调用。
   */
  beforeCreate() {
    console.log('beforeCreate');
  },
  /**
   * 在实例创建完成后被立即调用。
   * 在这一步，实例已完成以下的配置：
   * 数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
   * 挂载阶段还没开始，$el 不可用。
   */
  created() {
    console.log('created');
  },
  /**
   * 在挂载开始之前被调用
   */
  beforeMount() {
    console.log('beforeMount');
  },
  /**
   * 实例被挂载后调用
   * 不保证所有子组件都一起被挂载了
   * 可以用 `this.$nextTick` 保证
   */
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestory');
  },
  destroyed() {
    console.log('destroyed');
  },
}
</script>

<style>

</style>